<template>
  <div class="itemView" @click="pick">
    <div class="item-wrapper" >
      <div class="titleView">{{title}}</div>
      <div class=" item-wrapper-right">
        <div class="arrow-img"><img src="/web-hft-ee/static/img/m/me_arrows.png"></div>
      </div>
    </div>
    <div class="contentView">
      <p class="ellipsis2" v-if="!isEmpty">{{content}}</p>
      <p v-else>请填写{{title}}</p>
    </div>
  </div>
</template>

<script>
  import uploaderHandPic from '@/components/uploaderHandPic'

  export default {
    name: 'myInfoItem',
    props: {
      title: {
        type: String,
        default: ''
      },
      content: {
        type: String,
        default: ''
      },
      isEmpty: {
        type: Boolean,
        default: false,
      }
    },
    components: {
      uploaderHandPic
    },
    data() {
      return {}
    },
    computed: {},
    methods: {
      pick() {
        let data = {
          'title': this.title,
          'content': this.content
        }
        console.log(data)
        this.$emit('itemData', data) //父组件监听的名字必须是formSubmit
      },
    },
  }
</script>

<style scoped>
  .itemView{
    border-bottom: 1px #EEEEEE solid;
    background: white;
  }
  .item-wrapper {
    display: flex;
    justify-content: space-between;
    height: 44px;
    width: auto;
    padding: 0px 16px;
    align-items: center;
    font-size: 16px;
  }


  .item-wrapper > div:nth-of-type(1) {
    width: 140px;
  }

  .titleView {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: #98999E;
  }

  .item-wrapper-right {
    align-items: center;
  }

  .contentView {
    background: white;
    margin: 0px 16px 16px;
  }
  .contentView > p {
    font-family: PingFang-SC-Medium;
    font-size: 16px;
    color: #323334;
  }
  .arrow-img > img{
    height: 21px;
  }
</style>
